<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="逝者姓名" prop="personName">
        <el-input
          v-model="queryParams.personName"
          placeholder="请输入逝者姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="证件号码" prop="idCardNumber">
        <el-input
          v-model="queryParams.idCardNumber"
          placeholder="请输入证件号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上传时间" prop="idCardNumber">
        <el-date-picker
          v-model="queryParams.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- :cell-style="setCellStyle 会出现洗一个页面"
      :key="queryParams.pageNum" -->
    <el-table
      v-loading="loading"
      :data="listList"
      @selection-change="handleSelectionChange"
      :cell-style="setCellStyle"
      :key="queryParams.pageNum"
    >
      <el-table-column
        show-overflow-tooltip
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        label="ID"
        align="center"
        prop="id"
      />
      <el-table-column
        show-overflow-tooltip
        label="姓名"
        align="center"
        prop="personName"
        min-width="150px"
      >
        <template slot-scope="scope">
          <div class="multi-line-names">
            {{ formatToMultiLine(scope.row.personName) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="性别"
        align="center"
        prop="gender"
      >
        <template slot-scope="scope">
          <div class="multi-line-names">
            {{ formatToMultiLine(scope.row.gender) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="年龄"
        align="center"
        prop="age"
      />
      <el-table-column
        show-overflow-tooltip
        label="民族"
        align="center"
        prop="nationality"
        min-width="150px"
      />
      <el-table-column
        show-overflow-tooltip
        label="证件类型"
        align="center"
        prop="idCardType"
      />
      <el-table-column
        show-overflow-tooltip
        label="证件号码"
        align="center"
        prop="idCardNumber"
        min-width="180px"
      />
      <el-table-column
        show-overflow-tooltip
        label="户籍地址"
        align="center"
        prop="domicileAddress"
        min-width="250px"
      />
      <el-table-column
        show-overflow-tooltip
        label="生前住址"
        align="center"
        prop="currentAddress"
        min-width="250px"
      />
      <el-table-column
        show-overflow-tooltip
        label="出生日期"
        align="center"
        prop="dateOfBirth"
        min-width="200"
      >
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.dateOfBirth, '{y}-{m}-{d}') }}</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="死亡日期"
        align="center"
        prop="dateOfDeath"
        min-width="200"
      >
        <template slot-scope="scope">
          <div class="multi-line-names">
            {{ formatToMultiLine(scope.row.dateOfDeath) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="死亡原因"
        align="center"
        prop="deathReason"
        min-width="180"
      >
        <template slot-scope="scope">
          <div class="multi-line-names">
            {{ formatToMultiLine(scope.row.deathReason) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="死亡地点"
        align="center"
        prop="placeOfDeath"
        min-width="180"
      />
      <el-table-column
        show-overflow-tooltip
        label="承办人姓名"
        align="center"
        prop="contractor"
        min-width="180"
      />
      <el-table-column
        show-overflow-tooltip
        label="家属姓名"
        align="center"
        prop="surname"
        min-width="180"
      />
      <el-table-column
        show-overflow-tooltip
        label="联系电话"
        align="center"
        prop="phoneNumber"
        min-width="180"
      >
        <template slot-scope="scope">
          <div class="multi-line-names">
            {{ formatToMultiLine(scope.row.phoneNumber) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="与逝者关系"
        align="center"
        prop="relationship"
        min-width="180"
      />
      <el-table-column
        show-overflow-tooltip
        label="受理人员"
        align="center"
        prop="acceptedBy"
        min-width="150"
      />
      <el-table-column
        show-overflow-tooltip
        label="最后上传人"
        align="center"
        prop="createBy"
        min-width="150"
      />
      <el-table-column
        show-overflow-tooltip
        label="最后上传时间"
        align="center"
        prop="createTime"
        min-width="150"
      />
      <el-table-column
        show-overflow-tooltip
        label="最后修改人"
        align="center"
        prop="updateBy"
        min-width="150"
      />
      <el-table-column
        show-overflow-tooltip
        label="最后修改时间"
        align="center"
        prop="updateTime"
        min-width="150"
      />
      <el-table-column
        show-overflow-tooltip
        label="操作"
        align="center"
        min-width="150"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-info"
            @click="handleInfo(scope.row.id)"
            v-hasPermi="['system:list:edit']"
            >详情
          </el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:list:edit']"
            >修改
          </el-button> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasRole="['admin']"
            >删除
          </el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-notebook-1"
            @click="showDetail(scope.row)"
            v-hasRole="['admin']"
          >
            日志
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改数据清单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" label-width="140px">
        <!-- 民政数据模块 -->
        <div class="module-section">
          <div class="module-header">
            <div>
              <i class="el-icon-office-building"></i>
              <span class="module-title">民政数据</span>
            </div>
            <el-button
              type="success"
              v-if="mzConfirm == 1"
              round
              style="position: relative; right: 10px"
              >已确认</el-button
            >
            <el-button
              type="primary"
              v-if="!minzheng && mzConfirm == '0'"
              round
              @click="handleConfirm(1)"
              style="position: relative; right: 10px"
              >未确认</el-button
            >
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="逝者编号" prop="szbhMz">
                <el-input
                  v-model="form.szbhMz"
                  placeholder="请输入逝者编号"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="火化时间" prop="hhsjMz">
                <el-date-picker
                  v-model="form.hhsjMz"
                  type="datetime"
                  :disabled="minzheng"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择火化时间"
                  style="width: 100%"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="入馆时间" prop="rgsjMz">
                <el-date-picker
                  v-model="form.rgsjMz"
                  type="datetime"
                  :disabled="minzheng"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择入馆时间"
                  style="width: 100%"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="逝者姓名" prop="szxmMz">
                <el-input
                  :class="setAbnormalsStyleNameMZ"
                  v-model="form.szxmMz"
                  placeholder="请输入逝者姓名"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="性别" prop="xbMz">
                <el-select
                  v-model="form.xbMz"
                  placeholder="请选择性别"
                  clearable
                  style="width: 100%"
                  :disabled="minzheng"
                >
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                  <!-- <el-option label="未知" value="未知" /> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄" prop="nlMz">
                <el-input
                  v-model="form.nlMz"
                  placeholder="请输入年龄"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件类型" prop="zjlxMz">
                <el-select
                  v-model="form.zjlxMz"
                  placeholder="请选择证件类型"
                  clearable
                  style="width: 100%"
                  :disabled="minzheng"
                >
                  <el-option label="居民身份证" value="居民身份证" />
                  <el-option label="护照" value="护照" />
                  <el-option label="军官证" value="军官证" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码" prop="zjhmMz">
                <el-input
                  v-model="form.zjhmMz"
                  disabled
                  placeholder="请输入证件号码"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="户口所在地" prop="hkszdMz">
                <el-input
                  v-model="form.hkszdMz"
                  placeholder="请输入户口所在地"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生前住址" prop="szdzMz">
                <el-input
                  v-model="form.szdzMz"
                  placeholder="请输入生前住址"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="死亡日期" prop="swrqMz">
                <el-date-picker
                  v-model="form.swrqMz"
                  :class="setAbnormalsStyleDateMZ"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择死亡日期"
                  style="width: 100%"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="死亡原因" prop="swyyMz">
                <el-input
                  v-model="form.swyyMz"
                  placeholder="请输入死亡原因"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="承办人姓名" prop="cbrxmMz">
                <el-input
                  v-model="form.cbrxmMz"
                  placeholder="请输入承办人姓名"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="lxdhMz">
                <el-input
                  v-model="form.lxdhMz"
                  placeholder="请输入联系电话"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="与逝者关系" prop="gxMz">
                <el-select
                  v-model="form.gxMz"
                  placeholder="请选择与逝者关系"
                  clearable
                  style="width: 100%"
                  :disabled="minzheng"
                >
                  <el-option label="父子" value="父子" />
                  <el-option label="母子" value="母子" />
                  <el-option label="夫妻" value="夫妻" />
                  <el-option label="兄弟姐妹" value="兄弟姐妹" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="受理人员" prop="slryMz">
                <el-input
                  v-model="form.slryMz"
                  placeholder="请输入受理人员"
                  clearable
                  :disabled="minzheng"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 卫健数据模块 -->
        <div class="module-section">
          <div class="module-header">
            <div>
              <i class="el-icon-first-aid-kit"></i>
              <span class="module-title">卫健数据</span>
            </div>
            <el-button
              type="success"
              v-if="wjConfirm == 1"
              round
              style="position: relative; right: 10px"
              >已确认</el-button
            >
            <el-button
              type="primary"
              v-if="!weijian && wjConfirm == '0'"
              round
              @click="handleConfirm(2)"
              style="position: relative; right: 10px"
              >未确认</el-button
            >
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="报告地区名称" prop="bgdqmcWj">
                <el-input
                  v-model="form.bgdqmcWj"
                  placeholder="请输入报告地区名称"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报告卡编号" prop="bgbhWj">
                <el-input
                  v-model="form.bgbhWj"
                  placeholder="请输入报告卡编号"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="填报单位代码" prop="tbdwdmWj">
                <el-input
                  v-model="form.tbdwdmWj"
                  placeholder="请输入填报单位代码"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="填报单位名称" prop="tbdwmcWj">
                <el-input
                  v-model="form.tbdwmcWj"
                  placeholder="请输入填报单位名称"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="死者姓名" prop="szxmWj">
                <el-input
                  v-model="form.szxmWj"
                  :class="setAbnormalsStyleNameWJ"
                  placeholder="请输入死者姓名"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="xbWj">
                <el-select
                  v-model="form.xbWj"
                  placeholder="请选择性别"
                  clearable
                  style="width: 100%"
                  :disabled="weijian"
                >
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                  <!-- <el-option label="未知" value="未知" /> -->
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件类型" prop="zjlxWj">
                <el-select
                  v-model="form.zjlxWj"
                  placeholder="请选择证件类型"
                  clearable
                  style="width: 100%"
                  :disabled="weijian"
                >
                  <el-option label="居民身份证" value="居民身份证" />
                  <el-option label="护照" value="护照" />
                  <el-option label="军官证" value="军官证" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码" prop="zjhmWj">
                <el-input
                  v-model="form.zjhmWj"
                  disabled
                  placeholder="请输入证件号码"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出生日期" prop="csrqWj">
                <el-date-picker
                  v-model="form.csrqWj"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择出生日期"
                  style="width: 100%"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="mzWj">
                <el-input
                  v-model="form.mzWj"
                  placeholder="请输入民族"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="生前详细地址" prop="szxxdzWj">
                <el-input
                  v-model="form.szxxdzWj"
                  placeholder="请输入生前详细地址"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍详细地址" prop="hjxxdzWj">
                <el-input
                  v-model="form.hjxxdzWj"
                  placeholder="请输入户籍详细地址"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="死亡日期" prop="swrqWj">
                <el-date-picker
                  v-model="form.swrqWj"
                  :class="setAbnormalsStyleDateWJ"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择死亡日期"
                  style="width: 100%"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="死亡地点" prop="swddWj">
                <el-input
                  v-model="form.swddWj"
                  placeholder="请输入死亡地点"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="家属姓名" prop="jtxmWj">
                <el-input
                  v-model="form.jtxmWj"
                  placeholder="请输入可联系的家属姓名"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家属联系电话" prop="jtdhWj">
                <el-input
                  v-model="form.jtdhWj"
                  placeholder="请输入家属联系电话"
                  clearable
                  :disabled="weijian"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 公安数据模块 -->
        <div class="module-section">
          <div class="module-header">
            <div>
              <i class="el-icon-money"></i>
              <span class="module-title">公安数据</span>
            </div>
            <el-button
              type="success"
              v-if="gaConfirm == 1"
              round
              style="position: relative; right: 10px"
              >已确认</el-button
            >
            <el-button
              type="primary"
              v-if="!gongan && gaConfirm == '0'"
              round
              @click="handleConfirm(3)"
              style="position: relative; right: 10px"
              >未确认</el-button
            >
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="xmGa">
                <el-input
                  v-model="form.xmGa"
                  :class="setAbnormalsStyleNameGA"
                  placeholder="请输入姓名"
                  clearable
                  :disabled="gongan"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="xbGa">
                <el-select
                  v-model="form.xbGa"
                  placeholder="请选择性别"
                  clearable
                  style="width: 100%"
                  :disabled="gongan"
                >
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                  <!-- <el-option label="未知" value="未知" /> -->
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件号码" prop="sfzhGa">
                <el-input
                  v-model="form.sfzhGa"
                  placeholder="请输入证件号码"
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="户籍所在地" prop="hjszdGa">
                <el-input
                  v-model="form.hjszdGa"
                  placeholder="请输入户籍所在地/现住址"
                  clearable
                  :disabled="gongan"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="家属联系方式" prop="jslxfsGa">
                <el-input
                  v-model="form.jslxfsGa"
                  placeholder="请输入家属联系方式"
                  clearable
                  :disabled="gongan"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="死亡日期" prop="swsjGa">
                <el-date-picker
                  v-model="form.swsjGa"
                  :class="setAbnormalsStyleDateGA"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择死亡日期"
                  style="width: 100%"
                  clearable
                  :disabled="gongan"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="死亡原因" prop="swyyGa">
                <el-input
                  v-model="form.swyyGa"
                  placeholder="请输入死亡原因"
                  clearable
                  :disabled="gongan"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗组件 -->
    <!-- <operation-detail-dialog
      :visible.sync="dialogVisible"
      :logData="currentDetail"
      :idCardNumber="idCardNumber"
      @close="handleDialogClose"
    /> -->
  </div>
</template>

<script>
import {
  compare,
  getList,
  delList,
  addList,
  updateList,
  logs,
  getAbnormal,
  getConfirm,
  getConfirmPut,
} from "@/api/system/list";
// import OperationDetailDialog from "./components/OperationDetailDialog.vue";

export default {
  name: "List",
  components: {
    // OperationDetailDialog,
  },
  data() {
    return {
      idCardNumber: "",
      isShowTip: true,
      fileType: ["xls", "xlsx"],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      id: null, //当前选中行id
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 数据清单表格数据
      listList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: [],
        startTime: null,
        endTime: null,
        personName: null,
        idCardNumber: null,
      },
      // 表单参数 - 根据详情页面结构调整
      form: {
        // 民政数据
        szbhMz: null,
        hhsjMz: null,
        rgsjMz: null,
        szxmMz: null,
        xbMz: null,
        nlMz: null,
        zjlxMz: null,
        zjhmMz: null,
        hkszdMz: null,
        szdzMz: null,
        swrqMz: null,
        swyyMz: null,
        cbrxmMz: null,
        lxdhMz: null,
        gxMz: null,
        slryMz: null,

        // 卫健数据
        bgdqmcWj: null,
        bgbhWj: null,
        tbdwdmWj: null,
        tbdwmcWj: null,
        szxmWj: null,
        xbWj: null,
        zjlxWj: null,
        zjhmWj: null,
        csrqWj: null,
        mzWj: null,
        szxxdzWj: null,
        hjxxdzWj: null,
        swrqWj: null,
        swddWj: null,
        jtxmWj: null,
        jtdhWj: null,

        // 公安数据
        xmGa: null,
        xbGa: null,
        sfzhGa: null,
        hjszdGa: null,
        jslxfsGa: null,
        swsjGa: null,
        swyyGa: null,
      },
      // 表单校验
      // rules: {
      //   szxmMz: [
      //     { required: true, message: '逝者姓名不能为空', trigger: 'blur' }
      //   ],
      //   zjhmMz: [
      //     { required: true, message: '证件号码不能为空', trigger: 'blur' }
      //   ],
      //   szxmWj: [
      //     { required: true, message: '死者姓名不能为空', trigger: 'blur' }
      //   ],
      //   xmGa: [
      //     { required: true, message: '姓名不能为空', trigger: 'blur' }
      //   ]
      // }
      dialogVisible: false,
      currentDetail: [],
      minzheng: true,
      weijian: true,
      gongan: true,
      abnormals: [], //异常字段名
      //按钮确认状态
      gaConfirm: null,
      mzConfirm: null,
      wjConfirm: null,
    };
  },
  created() {
    //获取列表数据
    this.getList();
    //获取部门id
    this.getDept();
  },
  computed: {
    //姓名是否异常
    setAbnormalsStyleNameMZ() {
      if (this.abnormals) {
        return this.abnormals.includes("szxmMz") ? "bordr_style" : "";
      }else{
        return false
      }
    },
    setAbnormalsStyleNameGA() {
        if (this.abnormals) {
        return this.abnormals.includes("xmGa") ? "bordr_style" : "";
      }else{
        return false
      }
    },
    setAbnormalsStyleNameWJ() {
        if (this.abnormals) {
        return this.abnormals.includes("szxmWj") ? "bordr_style" : "";
      }else{
        return false
      }
    },
    //死亡日期是否异常
    setAbnormalsStyleDateMZ() {
        if (this.abnormals) {
        return this.abnormals.includes("swrqMz") ? "bordr_style" : "";
      }else{
        return false
      }
      return this.abnormals.includes("swrqMz") ? "bordr_style" : "";
    },
    setAbnormalsStyleDateGA() {
        if (this.abnormals) {
        return this.abnormals.includes("swsjGa") ? "bordr_style" : "";
      }else{
        return false
      }
    },
    setAbnormalsStyleDateWJ() {
        if (this.abnormals) {
        return this.abnormals.includes("swrqWj") ? "bordr_style" : "";
      }else{
        return false
      }
      
    },
  },
  methods: {
    //获取异常字段
    getAbnormal(id) {
      getAbnormal({ id: id }).then((response) => {
        if (response.code == 200) {
          console.log("res.data", response.data);
          this.abnormals = response.data;
        } else {
          this.$msgSuccess(response.msg);
        }
      });
    },
    //数据确认查询
    getConfirm(id) {
      getConfirm(id).then((response) => {
        if (response.code == 200) {
          console.log("res.data", response.data);
          this.gaConfirm = response.data.ga;
          this.mzConfirm = response.data.mz;
          this.wjConfirm = response.data.wj;
          // if(this.gaConfirm == 1){
          //   this.gongan = true
          // }
          // if(this.mzConfirm == 1){
          //   this.minzheng = true
          // }
          // if(this.wjConfirm == 1){
          //   this.weijian = true
          // }
        } else {
          this.$modal.$msgError(response.msg);
        }
      });
    },
    //确认数据是否准确
    handleConfirm(value) {
      let param = {
        id: this.id,
      };
      if (value == 1) {
        param.mz = 1;
      } else if (value == 2) {
        param.wj = 1;
      } else if (value == 3) {
        param.ga = 1;
      }
      getConfirmPut(param).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess(response.msg);
          this.getConfirm(this.id);
        } else {
          this.$modal.msgError(response.msg);
        }
      });
    },
    getDept() {
      const roles = this.$store?.getters?.roles || [];
      const dept = this.$store?.getters?.dept || "";
      //民政 110     卫健 111     公安 112
      if (roles.includes("admin")) {
        this.minzheng = false;
        this.weijian = false;
        this.gongan = false;
        return;
      }
    //   console.log("rolesrolesroles", dept);
      if (dept == 110) {
        this.minzheng = false;
      } else if (dept == 111) {
        this.weijian = false;
      } else if (dept == 112) {
        this.gongan = false;
      }
    },
    setCellStyle({ row }) {
      // console.log("row", row);
      // 先判断变量是否存在，再检查是否包含<br>
      const hasBrInName = row.personName && row.personName.includes("</br>");
      const hasBrInDeath = row.dateOfDeath && row.dateOfDeath.includes("</br>");
      // 2. 显式设置所有样式（包括默认状态的背景色，覆盖残留样式）
      if (hasBrInName || hasBrInDeath) {
        return {
          "background-color": "rgba(255, 0, 0, 0.3) !important", // 强制优先级
          "text-align": "center !important",
          transition: "background-color 0.1s",
          // 额外添加：清除可能的继承/叠加样式
          "background-image": "none !important",
          opacity: "1 !important",
        };
      }

      // 默认样式与表格原生背景完全一致（避免叠加）
      return {
        "background-color": "#ffffff !important", // 表格默认背景色（可根据实际调整）
        "text-align": "center !important",
        "background-image": "none !important",
        opacity: "1 !important",
      };
    },
    /* 查询操作日志 */
    getLogs(id) {
      logs(id).then((response) => {
        this.currentDetail = response.data;
      });
    },
    formatToMultiLine(nameString) {
      if (!nameString) return "";
      return nameString.replace(/<\/br>/g, "\n");
    },

    /** 查询数据清单列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.time && this.queryParams.time.length === 2) {
        this.queryParams.startTime = this.queryParams.time[0];
        this.queryParams.endTime = this.queryParams.time[1];
      } else {
        this.queryParams.startTime = null;
        this.queryParams.endTime = null;
      }
      compare(this.queryParams).then((response) => {
        this.listList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        // 民政数据
        szbhMz: null,
        hhsjMz: null,
        rgsjMz: null,
        szxmMz: null,
        xbMz: null,
        nlMz: null,
        zjlxMz: null,
        zjhmMz: null,
        hkszdMz: null,
        szdzMz: null,
        swrqMz: null,
        swyyMz: null,
        cbrxmMz: null,
        lxdhMz: null,
        gxMz: null,
        slryMz: null,

        // 卫健数据
        bgdqmcWj: null,
        bgbhWj: null,
        tbdwdmWj: null,
        tbdwmcWj: null,
        szxmWj: null,
        xbWj: null,
        zjlxWj: null,
        zjhmWj: null,
        csrqWj: null,
        mzWj: null,
        szxxdzWj: null,
        hjxxdzWj: null,
        swrqWj: null,
        swddWj: null,
        jtxmWj: null,
        jtdhWj: null,

        // 公安数据
        xmGa: null,
        xbGa: null,
        sfzhGa: null,
        hjszdGa: null,
        jslxfsGa: null,
        swsjGa: null,
        swyyGa: null,
      };
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.time = [];
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加数据清单";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.id = row.id;
      const id = row.id || this.ids;
      getList(id).then((response) => {
        const gaSingle = response.data.gaSingle;
        const mzSingle = response.data.mzSingle;
        const wjSingle = response.data.wjSingle;
        this.form = {
          ...gaSingle,
          ...mzSingle,
          ...wjSingle,
          id: response.data.id,
        };
        this.open = true;
        this.title = "修改数据清单";
        this.getAbnormal(id);
        this.getConfirm(id);
      });
    },

    /** 跳转详情页面 */
    handleInfo(id) {
      this.$router.push({ path: "/info", query: { id: id } });
    },

    /** 提交按钮 */
    submitForm() {
      // 只有当死亡日期有值时才进行校验
      if (this.form.swrqMz) {
        const deathDate = new Date(this.form.swrqMz);
        const entryTime = new Date(this.form.rgsjMz);
        const cremationTime = new Date(this.form.hhsjMz);

        // 校验死亡日期必须早于入馆时间和火化时间
        if (deathDate >= entryTime) {
          this.$modal.msgError("死亡日期必须早于入馆时间");
          return;
        }

        if (deathDate >= cremationTime) {
          this.$modal.msgError("死亡日期必须早于火化时间");
          return;
        }
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateList(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addList(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除数据清单编号为"' + ids + '"的数据项？')
        .then(function () {
          return delList(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    showDetail(row) {
      this.idCardNumber = row.idCardNumber;
      this.getLogs(row.idCardNumber);
      this.dialogVisible = true;
    },
    handleDialogClose() {
      this.dialogVisible = false;
      this.currentDetail = {};
    },
    getOperateType(operate) {
      const typeMap = {
        INSERT: "success",
        UPDATE: "warning",
        DELETE: "danger",
      };
      return typeMap[operate] || "info";
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/data/export",
        {
          ...this.queryParams,
        },
        `数据清单_${new Date().getTime()}.xlsx`
      );
    },
    /* 下载模板 */
    handleExample(res) {
      //1民政  2卫健  3公安
      if (res == 1) {
        this.download("system/hhjl/importTemplate", {}, `MZ_导入模板.xlsx`);
      } else if (res == 2) {
        this.download("system/swxx/importTemplate", {}, `WJ_导入模板.xlsx`);
      } else if (res == 3) {
        this.download("system/swmd/importTemplate", {}, `GA_导入模板.xlsx`);
      }
    },
    handleSucess() {
      this.getList();
    },
  },
};
</script>

<style scoped>
.multi-line-names {
  white-space: pre-line;
  line-height: 1.6;
  text-align: center;
}

/* 弹窗样式优化 */
::v-deep .el-dialog__body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

/* 模块样式 */
.module-section {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: #f8f9fa;
}

.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #409eff;
}

.module-header i {
  font-size: 18px;
  margin-right: 8px;
  color: #409eff;
}

.module-title {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
}

/* 响应式调整 */
@media (max-width: 768px) {
  ::v-deep .el-dialog {
    width: 95% !important;
  }

  .module-section {
    padding: 12px;
  }

  ::v-deep .el-form-item__label {
    width: 120px !important;
  }
}
/* 设置el-table滚动条高度为20px */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 12px !important;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  height: 12px !important;
  border-radius: 10px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  height: 12px !important;
}
.bordr_style {
  border: 1px solid red;
  padding: 5px;
  border-radius: 10px;
}
</style>
